<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入样式文件 -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"
/>
<link rel="stylesheet" href="./src/style/iconfont/iconfont.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    <title>Document</title>
</head>
<body>
<div id="app">
    <van-tabbar v-model="active" active-color="#E40137" inactive-color="#B4B4BD">
        <van-tabbar-item>
            <span>公司</span>
            <template #icon>
            <i class="iconfont">&#xe63b;</i>
            </template>
        </van-tabbar-item>
        <van-tabbar-item>
            <span>刷题</span>
            <template #icon>
            <i class="iconfont">&#xe63f;</i>
            </template>
        </van-tabbar-item>        <van-tabbar-item>
            <span>发现</span>
            <template #icon>
            <i class="iconfont">&#xe646;</i>
            </template>
        </van-tabbar-item>        <van-tabbar-item>
            <span>我的</span>
            <template #icon>
            <i class="iconfont">&#xe645;</i>
            </template>
        </van-tabbar-item>
      </van-tabbar>
</div>
<script>
    // 在 #app 标签下渲染一个按钮组件
    new Vue({
      el: '#app',
          data() {
              return {
                active: 'search',
              }
          },
    });
</script>
</body>
</html>